<template>
  <el-container style="padding: 10px; width: 100%; ">

    <el-aside>
      <orgs-tree @select="selectOrg" :current-node="addForm.orgId"></orgs-tree>
    </el-aside>
    <el-main>
      <el-form
        size="mini"
      >
        <el-form-item label="用户名">
          <el-input v-model="addForm.ssn" :readonly="readOnly"></el-input>
        </el-form-item>

        <el-form-item label="账号">
          <el-input v-model="addForm.username" :readonly="readOnly" ></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="addForm.password" show-password :readonly="readOnly" :disabled="readOnly || update"></el-input>
        </el-form-item>

        <el-form-item label="手机号">
          <el-input v-model="addForm.phoneNum" :readonly="readOnly" ></el-input>
        </el-form-item>

        <el-form-item label="组织">
          <el-input v-model="dto.orgName" readonly="readonly" :readonly="readOnly"></el-input>
        </el-form-item>

        <el-form-item label="角色" :readonly="readOnly">
          <el-select filterable v-model="addForm.roleId" placeholder="选择角色">
            <el-option
              v-for="item in this.roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="!readOnly">
          <el-col :span="2">
            <el-button type="primary" @click="addUser" v-if="update == null || !update">新建</el-button>
            <el-button type="primary" @click="updateUser" v-if="update">修改</el-button>
          </el-col>
          <el-col :span="2">
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-form-item>

      </el-form>
    </el-main>
  </el-container>

</template>

<script>
  import OrgsTree from '../../orgs/components/OrgsTree'
  export default {
    name: 'index',
    components: { OrgsTree },
    data: function() {
      return {
        addForm: {
          id: null,
          ssn: null,
          username: null,
          password: null,
          phoneNum: null,
          orgId: null,
          roleId: null,
        },
        dto: {
          orgName: null,
        },
        roleList: [],
        update: false,
        readonly: false,
      }
    },
    created() {
      this.getRoleList();
      this.update = this.$route.params.update != null ? this.$route.params.update : this.update;
      this.readOnly = this.$route.params.readOnly != null ? this.$route.params.readOnly : this.readOnly;
      this.addForm.id = this.$route.params.userId != null ? this.$route.params.userId : this.id;
      if (this.update || this.readOnly) {
        this.getUserInfo(this.addForm.id);
      }
    },
    methods: {
      getRoleList() {
        this.$api.roleList().then(res => {
          this.roleList = res;
        })
      },
      getUserInfo(id) {
        this.$api.getUserInfo(id).then(res => {
          this.addForm.id = res.id;
          this.addForm.ssn = res.ssn;
          this.addForm.username = res.username;
          this.addForm.phoneNum = res.phoneNum;
          this.addForm.roleId = res.roleId;
          this.addForm.orgId = res.orgId;
          this.dto.orgName = res.orgName;
        })
      },
      addUser() {
        this.$api.userAdd(this.addForm).then(res => {
          console.log("用户添加成功")
        })
      },
      updateUser() {
        this.$api.userUpdate(this.addForm).then(res => {
          this.getUserInfo(this.addForm.id);
        })
      },
      selectOrg({id, orgName}) {
         if (!this.readOnly) {
           // console.log(1)
           this.addForm.orgId = id;
           this.dto.orgName = orgName;
         }
      },
      reset() {
        Object.assign(this.$data.addForm, this.$options.data().addForm)
        Object.assign(this.$data.dto, this.$options.data().dto)
      },
    },

  }
</script>

<style scoped>

</style>
